<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
</head>
<body>
    <!-- v-bind 主要用法是动态更新 HTML 元素上的属性 -->
    <div id="app1">

        <!-- 使用 v-bind:style (即 :style) 可以给元素绑定内联样式，方法与 :class 类似，也有对象语法和数组语法 -->
        <div :style="{ 'color': color, 'fontSize': fontSize + 'px' }">文本1</div>


        <!-- 大多数情况下， 直接写一长串的样式不便于阅读和维护，所以一般写在 data 或 computed 里，以 data 为例： -->
        <div :style="styleA">文本2</div>


        <!-- 应用多个样式对象时，可以使用数组语法 -->
        <div :style="[styleA, styleB]">文本</div>
    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>

        var app1 = new Vue({
            el: "#app1",
            data: {
                color: "red",
                fontSize: 14,
                styleA: {
                    "color": "red",
                    "fontSize": 14 + 'px'
                },
                styleB: {
                    "margin": "10px"
                }

            }
        });


    </script>

</body>
</html>